<template>
    <div class="fillcontain"> 
        <div>
            <!-- 时间选择器 -->
            <el-form :inline="true" ref="add_data" :model="search_data">
                <el-date-picker
                    v-model="search_data.startTime"
                    type="datetime"
                    placeholder="选择开始时间">
                </el-date-picker> --
                <el-date-picker
                    v-model="search_data.endTime"
                    type="datetime"
                    placeholder="选择结束时间">
                </el-date-picker>
                <el-form-item class="btnleft">
                    <el-button type="primary" size ="mini" icon="view" @click='searchTime'>筛选</el-button>
                </el-form-item>
                <!-- 添加区域 -->
                <el-form-item class="btnRight">
                    <el-button type="primary" 
                               size ="mini"
                               icon="view" 
                               v-if="User.user === 'boss'"
                               @click='handleAdd'>添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格区域 -->
        <div class="table_container">
            <el-table
                v-if="tableData !== null"
                :data='tableData'
                style="width: 100%"
                max-height="450"
                border>
                <el-table-column
                    prop="id"
                    label="序号"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="创建时间"
                    align='center'
                    width="230">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{ scope.row.date }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="type"
                    label="收支类型"
                    align='center'
                    width="150">
                </el-table-column>
                <el-table-column
                    prop="describe"
                    label="收支描述"
                    align='center'
                    width="170">
                </el-table-column>
                <el-table-column
                    prop="income"
                    label="收入"
                    align='center'
                    width="130"> 
                    <template slot-scope="scope">
                        <span style="color: #00d053"> +{{ scope.row.income }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="expend"
                    label="支出"
                    align='center'
                    width="130">
                    <template slot-scope="scope">
                        <span style="color: #f56767"> -{{ scope.row.expend }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="cash"
                    label="账户现金"
                    align='center'
                    width="150">
                    <template slot-scope="scope">
                        <span style="color: #4db3ff"> {{ scope.row.cash }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注"
                    align='center'
                    width="170">
                </el-table-column>
                <el-table-column 
                    label="操作"
                    align="center"
                    v-if="User.user === 'boss'">
                    <template slot-scope="scope">
                        <el-button
                        size="mini"
                        type="warning"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pagination.page_index"
                :page-size="pagination.page_size"
                :page-sizes="pagination.page_sizes"
                :layout="pagination.layout"
                :total="pagination.total"
                class="pagination">
            </el-pagination>
        </div>
        <!-- Dialog对话框 -->
        <Dialog :dialog="dialog" :form="form" @update="getProfile"></Dialog>
    </div>
</template>
<script>
import Dialog from '../components/Dialog.vue';

export default {
  name: "FundList",
  data () {
    return {
        search_data: {
            startTime: "",
            endTime: ""
        },
        tableData: [],
        allTableData: [],
        filterTime: [],
        dialog: {
            show: false,
            title: '',
            option: ''
        },
        form: {
            type: "",
            describe: "",
            income: "",
            expend: "",
            cash: "",
            remark: "",
            id: ""
        },
        pagination: {
            page_index: 1,  // 当前位于哪页
            page_size: 5,   // 每页显示条目个数
            page_sizes: [5,10,15,20],   // 每页显示个数选择器的选项设置
            layout: 'total, sizes, prev, pager, next, jumper',  // 翻页属性
            total: 0    // 总数
        }
    };
  },
  computed:{
      User(){
          return this.$store.getters.user
      }
  },
  created() {
      this.getProfile()
  },
  methods: {
    //  获取接口数据
      getProfile(){
          this.$axios.get("/api/profile")
          .then(res => {
            this.allTableData = res.data
            this.filterTime = res.data
            //   console.log(this.tableData.data);
            // 设置分页数据
            this.setPaginations();
          })      
      },
      //   筛选时间
      searchTime(){
        //   首先判断选择时间是否为空
        if(!this.search_data.startTime || !this.search_data.endTime){
            this.$message({
                type: 'warning',
                message: '请选择时间区间'
            })
            this.getProfile()
            return
        }
        // 设置开始和结束时间
        const sTime = this.search_data.startTime.getTime()
        const eTime = this.search_data.endTime.getTime()
        // 过滤出在时间范围内的数据
        this.allTableData.data = this.filterTime.data.filter(item => {
            const date = new Date(item.date)
            const time = date.getTime()
            return time >= sTime && time <= eTime
        })
        // 设置分页数据
        this.setPaginations();
      },
      // 设置分页数据
      setPaginations(){
          this.pagination.page_index = 1
          this.pagination.page_size = 5
          this.pagination.total = this.allTableData.data.length
          // 设置默认分页数据 :一页显示5条
          this.tableData = this.allTableData.data.filter((item,index) => {
              return index < this.pagination.page_size
          })
      },
        //  编辑信息
      handleEdit(index,row){
        this.dialog = {
            show: true,
            title: '修改资金信息',
            option: 'edit'
        },
        this.form = {
            type: row.type,
            describe: row.describe,
            income: row.income,
            expend: row.expend,
            cash: row.cash,
            remark: row.remark,
            id: row.id
        }
      },
        //  删除信息
      handleDelete(index,row){
          console.log(row.id);
        this.$axios.post(`/api/profile/removes/${row.id}`,row.id).then(res => {
            console.log(res.data)
            this.$message("删除成功")
            this.getProfile()
        })
      },
        //  添加信息
      handleAdd(){  
        this.dialog = {
            show: true,
            title: '添加资金信息',
            option: 'adds'
        },
        this.form = {
            type: "",
            describe: "",
            income: "",
            expend: "",
            cash: "",
            remark: "",
            id: ""
        }
      },
        //  处理一页显示几条数据
      handleSizeChange(page_size){
        //   console.log(page_size)
          this.pagination.page_index = 1
          this.pagination.page_size = page_size;
          this.tableData = this.allTableData.data.filter((item,index) => {
              return index < page_size
          })
      },
        //  前往到哪一页
      handleCurrentChange(page){
        //   console.log(page)
        const sIndex = ((page-1) * this.pagination.page_size) -1
        const eIndex = page * this.pagination.page_size
        // 设置默认分页数据
        this.tableData = this.allTableData.data.filter((item,index) => { 
            return index > sIndex && index < eIndex
        })
      }
  },
  components:{
    Dialog
  }
}
</script>
<style scoped>
    .fillcontain{
        width: 100%;
        height: 100%;
        padding: 15px;
        box-sizing: border-box;
    }
    .btnleft{
        position: relative;
        left: 1%;
    }
    .btnRight{
        float: right;
    }
    .pagination{
        text-align: right;
        margin: 10px;
    }
</style>